:root {
    --primary: #f87f3f;
    --primary-dark: #c76028;
    --secondary: #77472d;
    --layer: #fffcfa;
    --layer2: #e9e3e1;
    --br-sm: 0.25rem;
    --br-md: 0.5rem;
    --br-lg: 0.75rem;
    --br-xl: 1rem;
    --br-pill: 50rem;
}

body {
    font-family: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #eae4dc;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: calc(-0.01em - 0.05vw);
    font-family: 'Ancizar Serif', serif;
    font-weight: 700;
}

p, li, span, a {
    letter-spacing: calc(-0.01em - 0.02vw);
    font-weight: 400;
}

.btn {
    letter-spacing: -0.02em;
    border-radius: var(--br-lg);
}

.btn-primary {
    background-color: var(--primary);
    border: 1px solid var(--primary);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    }

.card {
    border-radius: var(--br-lg);
    background-color: var(--layer);
    border: 1px solid #00000022;
}

.navbar {
    background-color: #d9c8b2;
    border-bottom: 1px solid #00000022;
}

.badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.3rem 0.4rem;
    font-weight: 600;
    font-size: 13.49px;
}

label {
    font-weight: 600;
}

.form-select, .form-control {
    border-radius: var(--br-lg);
    border: 1px solid #00000022;
    padding: 0.5rem;
    font-size: 16px;
}

.btn-outline-coffee {
    --bs-btn-color: #77472d;
    --bs-btn-border-color: #77472d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #77472d;
    --bs-btn-hover-border-color: #77472d;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #77472d;
    --bs-btn-active-border-color: #77472d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #77472d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #77472d;
    --bs-gradient: none;
}
.color-coffee{
    background-color: #77472d;
}

.btn-coffee {
    --bs-btn-color: #fff;
    --bs-btn-bg: #77472d;
    --bs-btn-border-color: #77472d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6a4029;
    --bs-btn-hover-border-color: #6a4029;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5e3824;
    --bs-btn-active-border-color: #5e3824;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #77472d;
    --bs-btn-disabled-border-color: #77472d;
}

.accordion-button:focus {
    box-shadow: none;
    outline: none;
}


.accordion-button:not(.collapsed) {
    background-color: #fff;
    color: inherit;
    box-shadow: none;
}